import React, {useEffect, useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout'
import ProTable from "@ant-design/pro-table";
import {Button, Image, message, Select, Popconfirm} from "antd";
import {PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined} from "@ant-design/icons";
import {getUserRoleData, deleteUerRole, resetUserRolePw, getAllRoleList} from "@/services/userrole";
import CreateOrEdit from './components/CreateOrEdit'

const {Option} = Select;

const Index = () => {

  const ref = useRef();

  // 角色分配状态
  const [data, setData] = useState(undefined)

  // 设置模态框显示状态
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 编辑 显示人员的id状态
  const [uid, setUid] = useState(undefined)

  // 编辑、添加 是否显示模态框的方法
  const isModalShow = (show, uid = undefined) => {
    setIsModalVisible(show)
    setUid(uid)
  }

  // 获取人员列表
  const getUserRole = async (params) => {
    const res = await getUserRoleData(params)
    return {
      data: res.data,
      success: true,
      total: res.meta.pagination.total,
    }
  }

  // 执行删除
  const isDelete = async (id) => {
    const response = await deleteUerRole(id)
    if (response.status === undefined) {
      ref.current.reload()
      message.success('删除成功')
    }
  }

  // 渲染角色
  useEffect(async () => {
    const response = await getAllRoleList();
    const res = response.data.map(item => {
      return (<Option key={item.id}>{item.cn_name}</Option>)
    })
    setData(res)
  }, [])

  // 执行重置密码
  const handleReset = async (id) => {
    const response = await resetUserRolePw(id)
    if (response.status === undefined) {
      ref.current.reload()
      message.success('重置密码成功')
    }
  }

  // 设置表格字段
  const columns = [
    {
      title: '头像',
      dataIndex: 'portrait',
      hideInSearch: true,
      render: (_, record) => (
        <Image
          width={50}
          size={64}
          src={record.portrait}
          placeholder={
            <Image
              preview={false}
              src={record.portrait}
              width={200}
            />
          }
        />
      )
    },
    {
      title: '用户名',
      dataIndex: 'username'
    },
    {
      title: '昵称',
      dataIndex: 'nickname'
    },
    {
      title: '创建时间',
      dataIndex: 'ltime',
      hideInSearch: true
    },
    {
      title: '编辑',
      render: (_, record) => (
        <div>
          <Button
            type="primary"
            shape="circle"
            onClick={() =>
              isModalShow(true, record.id)} icon={<EditOutlined/>}
          />&nbsp;&nbsp;&nbsp;
          <Popconfirm
            title="你确定要重置密码吗？重置后为123456"
            onConfirm={() => {
              handleReset(record.id)
            }}
            okText='确认'>
            <Button
              type="primary"
              shape="circle"
              icon={<ReloadOutlined
              />}/>
          </Popconfirm>&nbsp;&nbsp;
          <Popconfirm
            title="你确定要删除吗？"
            onConfirm={()=>{isDelete(record.id)}}
            okText='确认'
          >
            <Button
              type="danger"
              shape="circle"
              icon={<DeleteOutlined/>}
            />
          </Popconfirm>&nbsp;&nbsp;&nbsp;
        </div>
      )
    }
  ]

  return (
    <PageContainer>
      <ProTable
        actionRef={ref}
        columns={columns}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 5
        }}
        hideOnSinglePage={true}
        request={async (params = {}) => getUserRole(params)}
        dateFormatter="string"
        headerTitle="人员列表"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={() => isModalShow(true)}>
            新建
          </Button>,
        ]}
      />
      {
        isModalVisible ?
          <CreateOrEdit
            isModalVisible={isModalVisible}
            isModalShow={isModalShow}
            refs={ref}
            dataT={data}
            uid={uid}
          /> : ''
      }
    </PageContainer>
  );
};

export default Index;
